<template>
    <div class="Notice">
        <div class="title"><gy-icon fontName="icon-gonggao" style="font-size: 0.44rem;"/><span style="margin-left: 0.1rem;">公告:</span></div>
        <yd-rollnotice autoplay="2000">
            <yd-rollnotice-item><span @click="click"> 荣耀V9 3月超级钜惠！</span></yd-rollnotice-item>
            <yd-rollnotice-item><span @click="click"> 3.23京东超级品牌日格力盛典</span></yd-rollnotice-item>
            <yd-rollnotice-item><span @click="click"> 京东服饰 早春新品低至7折</span></yd-rollnotice-item>
            <!-- 最后一个无点击事件，以此占位 -->
            <yd-rollnotice-item><span @click="click">...</span></yd-rollnotice-item>
        </yd-rollnotice>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import GyButton from "../../../components/GyButton.vue";
import GyIcon from "../../../components/GyIcon.vue";
@Component({
    name: 'Notice',
    components: {GyIcon, GyButton}
})
export default class extends Vue {
    private click(): void {
        console.log('click')
    }
}
</script>

<style scoped lang="less">
.Notice {
    width: 6.9rem;
    height: 1.0rem;
    background-color: white;
    border-radius: 0.1rem;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.2rem;
    color: #0073F8;
    font-size: 0.3rem;
    & .title {
        width: 2.0rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
}
</style>
